/* global */

* {
    margin: 0;
    padding: 0;
}

.container {
    padding: 25px 50px;
    background: black;
    color: white;
}


/* --- object --- */

.obj {
    width: 100px;
    height: 50px;
    background-color: white;
}

.obj:hover {
    width: 300px;
    height: 100px;
    background-color: white;
}

.obj--red {
    background-color: red;
}

.obj--yellow {
    background-color: yellow;
}

.obj--blue {
    background-color: blue;
}


/* actions */

.action1 {
    transition: width 2s ease 0.5s;
}

.action2 {
    transition: background-color 2s;
}

.action3 {
    transition: all 4s linear;
}

.action4 {
    transition: all 4s cubic-bezier(0.8, 0, 0.1, 1);
}